<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import type { Node, Edge, ConnectionMode } from '@vue-flow/core';
import { VueFlow, Panel } from '@vue-flow/core';

// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue';
import SpecialEdge from './components/SpecialEdge.vue';
import CustomNode from './components/CustomNode.vue';

import { initialNodes, initialEdges } from './initial-elements';

// these are our nodes
const nodes = ref<Node[]>(initialNodes);

// these are our edges
const edges = ref<Edge[]>(initialEdges);

function addNode() {
  // const id = Date.now().toString();
  //
  // nodes.value.push({
  //   id,
  //   position: { x: 150, y: 50 },
  //   data: { label: `Node ${id}` },
  // });
}

// A change is anything that is triggered by an interaction with the flow, like adding, updating (position, selected), or removing a node or an edge, either by dragging, clicking etc. or by using the provided API.
const onNodesChange = (nodeArray) => {
  console.log('onNodesChange 方法执行了', nodeArray);
  if (nodeArray && nodeArray.length) {
    nodeArray.forEach((node) => {
      //   如果是点击事件 判断nodes中的数组数据，并重置数据
      // 如果只点中一个，就会返回nodes的所有对象， 如果按住ctrl选中，就只会返回ctrl返回的东西
      if (node.type == 'select') {
        nodes.value.forEach((element) => {
          if (element.id == node.id) {
            element.data.selected = node.selected;
          }
        });
      }
      // else if (node.type == 'position') {
      //   nodes.value.forEach((element) => {
      //     if (element.id == node.id) {
      //       element.data.dragging = node.dragging;
      //       // element.data.selected = node.selected;
      //     }
      //   });
      // }

      // type:"dimensions"  空间大小维度  这个调用是因为border的width变化le
    });
  }
};

const onNodeDragStop = (event) => {
  console.log('onNodeDragStop 方法执行了', event);
  if (event.nodes && event.nodes.length) {
    event.nodes.forEach((element) => {
      nodes.value.forEach((node) => {
        if (node.id == element.id) {
          node.data.dragging = false;
        }
      });
    });
  }
};

const onNodeDragStart = (event) => {
  console.log('onNodeDragStart 方法执行了', event);
  if (event.nodes && event.nodes.length) {
    event.nodes.forEach((element) => {
      nodes.value.forEach((node) => {
        if (node.id == element.id) {
          node.data.dragging = true;
        }
      });
    });
  }
};
</script>

<template>
  <div id="ddddd" style="height: 90vh; width: 70%">
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
      :onNodeDragStop="onNodeDragStop"
      :onNodeDragStart="onNodeDragStart"
    >
      <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
      <template #node-special="specialNodeProps">
        <SpecialNode v-bind="specialNodeProps" />
      </template>

      <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
      <template #edge-special="specialEdgeProps">
        <SpecialEdge v-bind="specialEdgeProps" />
      </template>

      <template #node-custom="props">
        <CustomNode v-bind="props" />
      </template>

      <Panel>
        <button type="button" @click="addNode">Add a node</button>
      </Panel>
    </VueFlow>
  </div>
</template>

<style>
.vue-flow__handle {
  background-color: #650d0d;
}
</style>
